<template>
  <body id="body">
  <!--  v-bind绑定，如果isRed值为false则不绑定，-->
  <div id="index">
    <p id="title">Hello World!</p><br>
    <el-row>
      <el-input v-model="input" placeholder="请输入内容" class="input"></el-input>
      <el-button icon="el-icon-search" circle v-on:click="click"></el-button>
    </el-row>
    <p>{{data_}}</p>
<!--    <el-main>-->
<!--      <books class="books-area"></books>-->
<!--    </el-main>-->
    <div>
      <!--  v-html:{{}}会将数据解释为文本，而不是HTML代码，想要解释成代码，就需要v-html:<span v-html="isRed">-->
      <!--    <span v-html="html_data"></span>-->
      <!--    v-model，双向绑定数据源-->
      <!--    <input v-model="data_">-->
      <!--    v-for，for循环-->
      <!--    <p v-for="item in list">{{ item }}</p>-->
      <!--    <p v-for="(item,i) in list"> 索引值:{{ i }}  -&#45;&#45; 每一项:{{ item }}</p>-->

      <!--    v-show，控制显示隐藏-->
      <!--    data:{-->
      <!--    isShow:false,-->
      <!--    },-->
      <!--    methods:{-->
      <!--    toggle:function(){-->
      <!--    this.isShow = !this.isShow;-->
      <!--    <div v-show="isShow"-->

      <!--    ！！v-show不会从dom中移除元素，而v-if会从dom中移除元素-->

      <!--    <div v-if='ok'>如果为真显示</div>-->
      <!--    <div v-else>否则显示这个元素</div>-->

      <!--    v-on 事件绑定, v-on简写:@-->
      <!--    <button v-on:click="show">欢迎来到perfect*博客园</button>-->
      <!--    methods:{-->

      <!--    show:function(){-->
      <!--    alert("欢迎来到perfect*博客园！！！");-->
      <!--    console.log('欢迎来到perfect*博客园！！！');-->
      <!--    },-->
    </div>

  </div>
  </body>
</template>

<script>
import Books from '../library/Books'
export default {
  name: 'AppIndex',
  components: {Books},
  data: function () {
    return {
      isRed: false,
      html_data: '<br>',
      data_: JSON.stringify(this.input),
      input: ''
    }
  },
  methods: {
    click: function () {
      this.data_ = JSON.stringify(this.input)
    }
  }
}
</script>

<style scoped>
  #index {
    margin: 200px auto;
  }

  #body {
    /* background: url("../../assets/bg03.jpg") no-repeat; Login背景*/
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }

  #title {
    margin: 20px auto;
    font-size: 60px;
    color: #409EFF;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }
  .input {
    height: 60px;
    width: 50%;
    margin-right: 30px;
  }
</style>
